<template>
  <div>
    <el-tabs type="card"
    >
      <el-tab-pane label="风采审核">
        <el-table :data="list" border max-height="680" style="width: 100%">
          <el-table-column
              label="序号"
              type="index"
              width="80"
          ></el-table-column>
          <el-table-column label="风采标题" prop="activitycontentTitle">
            <template slot-scope="scope">
              <span
                  style="cursor: pointer; color: #00a0e9"
                  @click="handleGetArticle(scope.row.activitycontentId)"
              >{{ scope.row.activitycontentTitle }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
              label="发布时间"
              prop="activitycontentDatetime"
          ></el-table-column>
          <el-table-column class="article-title" label="风采状态">
            <template slot-scope="scope">
              <span>{{ scope.row.activitycontentStatus | auditStatus }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success"
                  @click="handleAgreeArticle(scope.row.activitycontentId)"
              >通过
              </el-button>

              <el-button
                  slot="reference"
                  size="mini"
                  style="margin-right: 10px"
                  type="danger"
                  @click="toRefuse(scope.row)"
              >驳回
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"
        />
        <el-dialog
            :title="content ? content.activitycontentTitle : ''"
            :visible.sync="articleContentshow">
          <el-image v-if="content.avatar" :src="content ? content.avatar : ''"></el-image>
          <span v-text="content ? content.activitycontentDatetime : ''"></span>
          <el-button size="mini" type="info">活动信息</el-button>
          <el-button size="mini" type="info">发布者信息</el-button>
          <el-card>
            <div v-html="content ? content.activitycontentDisc : ''"></div>
          </el-card>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="option.action.refuse" title="请输入拒绝原因">
      <el-input v-model="option.action.refuseReason" placeholder="请输入拒绝原因" type="textarea"></el-input>
      <span slot="footer">
          <el-button @click="handleDelay(option.action.id)">确认</el-button>
          <el-button @click="option.action.refuse=false">取消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data () {
    return {
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      keyword: "",
      dataRange: null,
      content: "",
      articleContentshow: false,
      option: {
        action: {
          id: null,
          refuse: false,

          refuseReason: "",
        },
        infoShow: false,
      },
    };
  },
  mounted () {
    this.handleGetByNumActivity(1);
  },
  methods: {
    async handleGetBySizeActivity (size) {
      const pageNum = this.currentPage;
      let pageSize = this.currentPageSize;
      pageSize = size;
      const res = await this.$http.manager_getToAuditActivityContent({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },

    async handleGetActivityInfo (params) {
      this.articleContentshow = true;
      // console.log(params)
      const res = await this.$http.activityContentGet(params);
      if (res.code !== 0) return null;
      this.content = res.data;
      // console.log(this.content)
    },
    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      let pageNum = this.currentPage;
      const pageSize = this.currentPageSize;
      pageNum = num;
      // console.log(pageNum, pageSize)
      const res = await this.$http.manager_getToAuditActivityContent({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    async searchActivityContentByTime () {
      const range = this.dataRange;
      const pageNum = this.page;
      const pageSize = this.size;
      await this.$http.activitySearchTime({
        from: range[0],
        pageNum,
        pageSize,
        to: range[1],
      });
    },
    // 删除 风采
    async handleDelayArticle (e) {
      const res = await this.$http.commentAudit({
        id: e,
        status: 0,
      });
      if (res.code !== 0) return null;
      this.$router.go(0);
    },
    async handleAgreeArticle (e) {
      const res = await this.$http.manager_audit_ActivityContent({
        id: e,
        status: 1,
        reason: "",
      });
      if (res.code !== 0) return null;
      this.$router.go(0);
    },
    async handleGetArticle (e) {
      this.articleContentshow = true;
      const res = await this.$http.activityContentGetInfo(e);
      if (res.code !== 0) return null;
      this.content = res.data;
    },
    toRefuse (info) {
      this.option.action.refuse = true;
      this.option.action.id = info.activitycontentId;

    },
    async handleDelay (id) {

      this.option.action.refuse = false;
      let reason = this.option.action.refuseReason;
      await this.$http.manager_audit_ActivityContent({
        id: id,
        status: 0,
        reason,
      }).then(res => {
        if (res.code) return this.$message.error("失败");
        return this.$router.go(0);
      }).catch(e => {
        return this.$message.error("出错啦");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 40px;
}

.el-table {
  margin-top: 20px;
}

.article-title:hover {
  cursor: pointer;
  color: deepskyblue;
}
</style>
